<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="../js/layui/layui.js"></script>
		<link rel="stylesheet" type="text/css" href="../js/layui/css/layui.css" />
		
	
	</head>
	<body>
		
	<!--数据表格-->	
<table id="demo" lay-filter="test"></table>
<!--头部索引-->
 <div id = "tb"  style="display:none;" class="layui-form-inline" >
	<div style="line-height:50px;">
 	<div class="layui-inline">
      <label class="layui-form-inline">用户名</label>
      <div class="layui-input-inline">
        <input style="width:100px; "  type="tel" id="yhname" lay-verify="required" autocomplete="off" class="layui-input">
      </div>
    </div>
  <label class="layui-form-inline">创建时间范围</label>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="text" id="begintime" onblur="inchenkprices()"  class="layui-input">
      </div>
      ~
      <div class="layui-input-inline" style="width: 100px;">
        <input type="text" id="endtime" onblur="inchenkprice()"   class="layui-input">
      </div>

    
     <div class="layui-inline">
      <label class="layui-form-inline">是否锁定 </label>
      <div class="layui-input-inline   select">
        <select class="select"   id="isLock"  lay-verify="required" >
           <option value="">选择锁定状态</option> 
          <option value="是">是</option>
          <option value="否">否</option> 
     
        </select>
      </div>
    </div>
		<button type="button" onclick="searchBtn()" class="layui-btn layui-btn-primary layui-btn-radius"><i class="layui-icon  layui-icon-search" style="font-size: 25px; color: #1E9FFF;">搜索</i></button>
		<button type="button" onclick="add()" class="layui-btn layui-btn-primary layui-btn-radius"><i class="layui-icon  layui-icon-add-circle" style="font-size: 25px; color: #1E9FFF;">添加</i></button>
   	 </div>
</div>
</div>
 		<script type="text/html" id="titleTpl">
 			
		  {{#  if(d.isLockout == '是'){ }}
		  <button type="button" onclick="jiesuo('{{d.loginName}}')" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm">点击解锁</button>
		  {{#  } else { }}
		    <button type="button" onclick="suoding('{{d.loginName}}')" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">点击锁定</button>
		  {{#  } }}
		</script>

 		<script type="text/html" id="barDemo">
 			<button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="oper">设置</button>
 			<button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="show">查看角色</button>
			<button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">修改用户信息</button>
			<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delet">删除</button>
			<button type="button" class="layui-btn layui-btn-xs layui-btn-danger" lay-event="pwd">重置密码</button>
 		</script>

	<script>
$(function(){
	searchBtn();
})
var tableObj;
var token = window.localStorage.getItem("token");
		if(token==""||token==null){
			window.location="../login.html";
		}
function searchBtn(){
	var sname = $("#yhname").val();
	var begintime = $("#begintime").val();
	var endtime = $("#endtime").val();
	var isLock = $("#isLock").val();


layui.use(['table','laydate','jquery','form','transfer'], function(){
		  var table = layui.table;
		  var laydate = layui.laydate;
		  var $ = layui.$;
		  var form = layui.form;
		  var transfer = layui.transfer;
  //第一个实例
  tableObj = table.render({
    elem: '#demo'
    ,method:'post'
    ,toolbar:"#tb"
    ,where:{
    	orderBy:"",
		userName:sname,
		beginDate:begintime,
		endDate:endtime,
		isLock:isLock,
		token:token
    }
    ,url: '../GetUsersLayUI' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: '用户id',  sort: true, fixed: 'left',width:90,}
      ,{field: 'loginName', title: '用户名', sort: true,width:115, }
      ,{field: 'isLockout', title: '是否锁定 ',sort: true, width:115, templet: '#titleTpl'}
      ,{field: 'lastLoginTime', title: '最后登录时间', sort: true,width:145,} 
      ,{field: 'createTime', title: '创建时间', sort: true,width:145,}
      ,{field: 'psdWrongTime', title: '秘密错误次数',  sort: true}
      //,{field: 'lockTime', title: '用户锁定时间',  sort: true}
      ,{field: 'protectEMail', title: '邮箱', sort: true,}
      ,{field: 'protectMTel', title: '手机号码',  sort: true}
      
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:350}
    ]]
  });
  //自定义日期格式
  //日期时间选择器
laydate.render({
  elem: '#begintime'
  ,type: 'datetime'
  ,format: 'yyyy/MM/dd HH:mm:ss' //可任意组合
});
//自定义日期格式
//日期时间选择器
laydate.render({ 
  elem: '#endtime'
  ,type: 'datetime'
  ,format: 'yyyy/MM/dd HH:mm:ss' //可任意组合
});
//监听行工具事件
		   table.on('tool(test)', function(obj){
		     var data = obj.data;
		     document.getElementById("updates").reset();
		     //console.log(obj)
		     if(obj.event === 'edit'){
		    	 form.val("update",data)
		 	    	index = layer.open({
		 		    	 type:1
		 		    	 ,title:"用户修改窗口"	
		 		    	 ,content:$("#update")
		 		    	 ,area:["",""]
		 		     })
		     } else if(obj.event === 'delet'){
		     	 layer.confirm('确定要删除吗？', function(index){
		     	 	
		     	 	$.ajax({
						url:"../DeleteUser",
						data:{
							uid:data.id,
							token:token
						},
						dataType:"json",
						type:"post",
						success:function(res){
							if(res.success){
								layer.msg("删除成功",function(){
			   						tableObj.reload();
								});
					   		}else{
					   			if(res.message==0){
									layer.msg(res.remark,function(){
										window.location="../login.html";
									});
								}else{
									layer.msg("删除失败");
									tableObj.reload();
								}
					   		}
						}
					})
		     	})
		     }else if(obj.event==='oper'){
		     	 var uid = data.id
							//求所有角色
							$.ajax({
								url:"../GetRolesAll",
								data:{
									page:"0",
									limit:"0",
									token:token
								},
								dataType:"json",
								type:"post",
								success:function(obj){
									if(obj.message==0){
										layer.msg(obj.remark,function(){
											window.location="../login.html";
										});
									}else{
										 //求当前用户的角色
										  $.ajax({
											 url:'../GetRolesByUserIdLayUI',
											 data:{
												 uId:uid,
												 token:token
											 },
											 dataType:"json",
											 type:"post",
											 success:function(right){
												 //console.log(right.data)
												 //将角色id存储在集合里面，进行穿梭框右边数据的初始化
												 var ids=[];
												 for(var i =0;i<right.data.length;i++){
													ids[i] = right.data[i].id;
												 }
												
												 transfer.render({
												    elem: '#test1'
													,title:['全部角色','当前用户角色']
												    ,parseData: function(res){
												          return {
												            "value": res.id //数据值
												            ,"title": res.name //数据标题
												          }
												        }
												    ,data: obj.data
												    ,height:500
												    ,value: ids
													,onchange:function(obj,index){
														if(index == 0){
															//选中左边角色为当前用户设置
															var o=0;
															var p = obj.length;
																for(i in obj){
																	$.ajax({
																	url:"../AddUserToRole",
																	data:{
																		uId:uid,
																		rId:obj[i].value,
																		token:token
																	},
																	dataType:"json",
																	type:"post",
																	success:function(res1){
																		if(res1.success){
																		}
																	}
																})
																	o = o+1;
																}
															if(o==p){
																layer.msg("添加角色成功");
															}else{
																layer.msg("添加角色失败");
															}
														}else if(index==1){
															var o=0;
															var p = obj.length;
															//选中右边为当前用户移除角色
																for(i in obj){
																	$.ajax({
																		url:"../RemoveUserFromRole",
																		data:{
																			uId:uid,
																			rId:obj[i].value,
																			token:token
																		},
																		dataType:"json",
																		type:"post",
																		success:function(res1){
																			if(res1.success){
																			}
																		}
																	})
																	o = o+1;
															}
															if(o==p){
																layer.msg("移除角色成功");
															}else{
																layer.msg("移除角色成功");
															}
														}else{
															layer.msg("未选中数据");
														}
													}
												  })
											 }
										 })
									}
								}
							})
							layer.open({
								type:1,
								title:"为  "+data.loginName+"  设置角色",
								content:$("#operWin"),
								area:['500px','400px']
							})
			}else if(obj.event === 'pwd'){
		     	//alert("重置密码");
		     	 layer.confirm('确定要重置密码吗？', function(index){
		     	 	
		     	 	$.ajax({
						url:"../ResetPassword",
						data:{
							un:data.loginName,
							token:token
						},
						dataType:"json",
						type:"post",
						success:function(res){
							if(res.message==0){
								layer.msg(res.remark,function(){
									window.location="../login.html";
								});
							}else{
								layer.msg(res.remark,function(){
			   						tableObj.reload();
								});
							}
						}
					})
		     	})
		     }else if(obj.event === 'show'){
		     	$("#showdiv").empty();
		     	if(obj.message==0){
					layer.msg(res.remark,function(){
						window.location="../login.html";
					});
				}else{
					$.ajax({
						url:"../GetRolesByUserIdLayUI",
						data:{
							uId:data.id,
							token:token
						},
						dataType:"json",
						type:"post",
						success:function(res){
							
							 var names = data.loginName;
							if(res.count>0){
								var num=0
								
								$.each(res.data, function(i, item) {
            						num = num+1;
		    	  		            $("#showdiv").append(
		    	  		            		"<div><input value='"+num+"' readonly='readonly'>"+
		    	  		            		"<input value='"+item.id+"' readonly='readonly'>"+
		    	  		            		"<input value='"+item.name+"' readonly='readonly'></div>"
		    	  		          );
		    	  		        });
								index = layer.open({
					 		    	 type:1
					 		    	 ,title:"用户  "+names+" 所拥有的角色"	
					 		    	 ,content:$("#show")
					 		    	 ,area:["500","600"]
					 		     })
							}else{
								layer.msg("该用户还没有角色哟");
							}
						}
					})
				}
		   	}
		 });
	});
}
//输入时间  监听  前一个，后一个
function inchenkprice(){
	var begin=$("#begintime").val();
	 if(begin!=""){
	layer.msg("请稍等!",function (){
		var begintime=$("#begintime").val();
		   var endtime=$("#endtime").val();
		   if(begintime>endtime){
			   $("#begintime").val("");
			   $("#endtime").val("");
			   layer.msg("开始时间不能大于结束时间哟");
		   }
		})
	 }
	}
//前后时间验证
function inchenkprices(){
	var end=$("#endtime").val();
	 if(end!=""){
	layer.msg("请稍等!",function (){
		
		var begintime=$("#begintime").val();
		   var endtime=$("#endtime").val();
		   if(begintime>endtime){
			   $("#begintime").val("");
			   $("#endtime").val("");
			   layer.msg("开始时间不能大于结束时间哟");
		   }
		})
	 }
	}
		//add
//点击添加按钮
// 角色添加
var index;
function add(){

	
	// alert("添加");
		layui.use("layer",function(){
			var layer = layui.layer;
			document.getElementById("adds").reset();
			index = layer.open({
	         
				type:1
				,title:"用户添加"
				,content:$("#add")
				,area:["",""]
			})
		}) 
}
//点击表单添加保存按钮
function addyh(){
	var addlogname = $("#addlogname").val();
	var addemail = $("#addemail").val();
	var addmtel = $("#addmtel").val();
	var addmtellong = $("#addmtel").val().length;
	var addemaillong = $("#addemail").val().length;
	var spwd = $("#spwd").val();
	if(spwd==""){
		spwd="ysd123";
	}
  if(addlogname==""){
		layer.msg("名称不能为空");
	}else if(addemail==""){
		layer.msg("邮箱不能为空")
	}else if(addemaillong<8){
		layer.msg("请输入正确的邮箱")
	}else if(addmtel==""){
		layer.msg("手机号不能为空");
	}else if(addmtellong!=11){
		layer.msg("请输入正确的手机号");
	}else{
		 $.post("../CreateUser?loginName="+addlogname+"&pwd="+spwd+"&email="+addemail+"&mtel="+addmtel+"&token="+token,{},
	   	function(res){
	   		if(res.success){
	   			layer.msg("添加成功",function(){
	   				layer.close(index);
		   			tableObj.reload();
	   			});
	   		}else{
				if(res.message==0){
					layer.msg(res.remark,function(){
						window.location="../login.html";
					});
				}else{
					layer.msg("添加失败",function(){
		   				layer.close(index);
			   			tableObj.reload();
		   			});
				}
			}
	   	},"json"); 
	   	//alert("通过！");
	} 
}
//点击表单修改保存按钮
function updateyhbtn(){
	 //alert("修改保存");
	var updateyjName = $("#updateyjName").val();
	var updateProtectEMail = $("#updateProtectEMail").val();
	var updateProtectMTel = $("#updateProtectMTel").val();
	var addmtellong = $("#updateProtectEMail").val().length;
	var addemaillong = $("#updateProtectMTel").val().length;
	 if(updateProtectEMail==""){
			layer.msg("邮箱不能为空");
		}else if(updateProtectMTel==""){
			layer.msg("手机号不能为空");
		}else if(addmtellong!=11){
			layer.msg("请输入正确的手机号");
		}else if(addemaillong<8){
			layer.msg("请输入正确的邮箱");
		} else{
		 $.post("../UpdateUser?email="+updateProtectEMail+"&mtel="+updateProtectMTel+"&loginName="+updateyjName+"&token="+token,{},
			   	function(res){
			   		if(res.success){
			   			layer.msg("修改成功",function(){
			   				layer.close(index);
				   			tableObj.reload();
			   			});
			   		}else{
						if(res.message==0){
							layer.msg(res.remark,function(){
								window.location="../login.html";
							});
						}else{
							layer.msg("修改失败",function(){
				   				layer.close(index);
					   			tableObj.reload();
				   			});
						}
					}
			   	},"json");  
		
		layer.close(index);
		tableObj.reload();
	}
}
function suoding(a){
	//alert(a+"锁定");
	layer.confirm('确定要锁定该用户嘛？', function(index){
		$.ajax({
			url:"../LockUser",
			data:{
				un:a,
				token:token
			},
		dataType:"json",
		type:"post",
		success:function(res){
			if(res.success){
				layer.msg("锁定成功",function(){
				   	tableObj.reload();
				});
			}else{
				if(res.message==0){
					layer.msg(res.remark,function(){
						window.location="../login.html";
					});
				}else{
					layer.msg("锁定失败",function(){
						tableObj.reload();
		   			});
				}
			}
			
		}
		})
	})
}
function jiesuo(a){
	//alert(a+"解锁");
	layer.confirm('确定要解锁该用户嘛？', function(index){
		$.ajax({
			url:"../UnLockUser",
			data:{
				un:a,
				token:token
			},
		dataType:"json",
		type:"post",
		success:function(res){
			
			if(res.success){
				layer.msg("解锁成功",function(){
				   	tableObj.reload();
				});
			}else{
				if(res.message==0){
					layer.msg(res.remark,function(){
						window.location="../login.html";
					});
				}else{
					layer.msg("解锁失败",function(){
						tableObj.reload();
		   			});
				}
			}
		  }
		})
	})
}
// 		添加窗体  登录名不得重复
function ajename(){
	var addlogname = $("#addlogname").val();
	//alert("用户名=>"+addlogname);
	$.ajax({
		url:"../findAllByUname",
		data:{
			name:addlogname,
		},
	dataType:"json",
	type:"post",
	success:function(res){
		if(res.success){
		}else{
			layer.msg("登录名重复，请重新填写!",function(){
				$("#addlogname").val("");
			});
		}
	  }
	})
}
//	添加窗体  邮箱不得重复
function ajeemail(){
	var addemail = $("#addemail").val();
	//alert("邮箱=>"+addemail);
	$.ajax({
		url:"../findAllByUemal",
		data:{
			emal:addemail,
		},
	dataType:"json",
	type:"post",
	success:function(res){
		if(res.success){
		}else{
			layer.msg("邮箱重复，请重新填写!",function(){
				$("#addemail").val("");
			});
		}
	  }
	})
}
//添加窗体  手机号不得重复
function ajetel(){
	var addmtel = $("#addmtel").val();
	//alert("手机号=>"+addmtel);
	$.ajax({
		url:"../findAllByUnumber",
		data:{
			tel:addmtel,
		},
	dataType:"json",
	type:"post",
	success:function(res){
		if(res.success){
		}else{
			layer.msg("手机号重复，请重新填写!",function(){
				$("#addmtel").val("");
			});
		}
	  }
	})
}
//修改窗体  邮箱不得重复
function ajeemailupdate(){
	var updateProtectEMail = $("#updateProtectEMail").val();
	//alert("邮箱=>"+addemail);
	$.ajax({
		url:"../findAllByUemal",
		data:{
			emal:updateProtectEMail,
		},
	dataType:"json",
	type:"post",
	success:function(res){
		if(res.success){
		}else{
			layer.msg("邮箱重复，请重新填写!",function(){
				$("#updateProtectEMail").val("");
			});
		}
	  }
	})
}
//修改窗体  手机号不得重复
function ajetelupdate(){
	var updateProtectMTel = $("#updateProtectMTel").val();
	//alert("手机号=>"+addmtel);
	$.ajax({
		url:"../findAllByUnumber",
		data:{
			tel:updateProtectMTel,
		},
	dataType:"json",
	type:"post",
	success:function(res){
		if(res.success){
		}else{
			layer.msg("手机号重复，请重新填写!",function(){
				$("#updateProtectMTel").val("");
			});
		}
	  }
	})
}
</script>
<!--查看角色窗体  下 -->
		<div  id="show" style="display:none">
			<form id="showform">
		   			<div>
		   				<input value="编       号" readonly="readonly" style="border: none;">
				   		<input value="角色ID" readonly="readonly" style="border: none;">
				        <input value="角色名称" readonly="readonly" style="border: none;">
		   			</div>
		   		<div id="showdiv">
		   		</div>
		   	</form>
		</div>         
<!--查看角色窗体 上 -->

<!--修改窗体  下 -->
		<div  id="update" style="display:none">
		
		   <form id="updates" class="layui-form"  lay-filter="update">
		    <input id="updateyjName" name="loginName" hidden="none" readonly="readonly">
		  <div class="layui-inline">
			  <label class="layui-form-inline">邮箱：</label>
				<div class="layui-input-inline select">
				       <input name="protectEMail"  onblur="ajeemailupdate()" id="updateProtectEMail" type="email" id="peoplename" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"><br/>
				  </div>
		  </div>
		  <div class="layui-inline">
			  <label class="layui-form-inline">手机号：</label>
				<div class="layui-input-inline select">
				       <input name="protectMTel"  onblur="ajetelupdate()" id="updateProtectMTel" type="text" id="peoplename" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"><br/>
				  </div>
		  </div>
		<div class="layui-inline count">
		    <button type="button" class="layui-btn layui-btn-warm"  onclick="updateyhbtn()">修改</button>
		    <button type="reset" class="layui-btn layui-btn-primary" >重置</button>
		</div>
		   </form>
		</div>         
<!--修改窗体 上 --> 

<!--添加窗体  下 -->
		<div  id="add" style="display:none">
		
		   <form id="adds" class="layui-form">
		<div class="layui-inline">
			  <label class="layui-form-inline">登&nbsp;&nbsp;录&nbsp;名：</label>
				<div class="layui-input-inline select">
				       <input type="text" id="addlogname" onblur="ajename()" lay-verify="required" placeholder="人员姓名" autocomplete="off" class="layui-input"><br/>
				  </div>
		  </div>
		  <div class="layui-inline">
			  <label class="layui-form-inline">登录密码：</label>
				<div class="layui-input-inline select">
				       <input type="text" id="spwd" lay-verify="required" placeholder="" autocomplete="off" class="layui-input"><br/>
				  </div>
				  <div style="color: red;">密码为空则自动设为默认密码:ysd123</div>
		  </div>
		  <div class="layui-inline">
			  <label class="layui-form-inline">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：</label>
				<div class="layui-input-inline select">
				       <input type="email" id="addemail" onblur="ajeemail()" lay-verify="required" placeholder="邮箱" autocomplete="off" class="layui-input"><br/>
				  </div>
		  </div>
		  <div class="layui-inline">
			  <label class="layui-form-inline">手机号码：</label>
				<div class="layui-input-inline select">
				       <input type="text" onblur="ajetel()" oninput ="value=value.replace(/[^0-9.]/g,'')" id="addmtel" lay-verify="required" placeholder="手机号码" autocomplete="off" class="layui-input"><br/>
				  </div>
		  </div>
		<div class="layui-inline count">
		    <button type="button" class="layui-btn layui-btn-warm"  onclick="addyh()">添加</button>
		    <button type="reset" class="layui-btn layui-btn-primary" >重置</button>
		</div>
		   </form>
		</div>         
<!--添加窗体 上 --> 


		<!--穿梭框-->
		<div id="operWin" style="display: none;">
			<div id="test1" class="demo-transfer">
			</div>
		</div>

</body>
</html>
